awesome-notifications
Advanced tools
It's a lightweight, fully customizable JavaScript library without any dependencies for showing notifications.
Demo: https://f3oall.github.io/awesome-notifications/
Attention! This library uses FontAwesome icons, so you either need to make sure that FontAwesome is connected to your project, either disable icons, passing the
icons: {enabled: false}property to options. Also you can preserve icons, setting up a custom template for them via edittingoptions.icons.template
Via NPM
npm install --save awesome-notification
In browser
Download index.var.js and style.css, then put them in your html:
<head>
<link rel="stylesheet" href="path/to/style.css"></link>
<script src="path/to/index.var.js"></script>
</head>
Vue.js version
You can learn more in the Vue.js version repository: https://github.com/f3oall/vue-awesome-notifications
Node.js
import AWN from "awesome-notifications"
let notifier = new AWN(options)
In browser
<script>
var notifier = new AWN.default(options);
</script>
<button onclick="notifier.success('Success message');">Show Success</button>
Available functions
All msg params support HTML.
| Function | Params | Description | Example |
|---|---|---|---|
tip(msg) | msg - String, required | shows a gray box with specified msg | tip('First line text<br>Second line text') |
info(msg) | msg - String, required | shows a blue box with specified msg | info('<b>You can put any HTML here</b>') |
success(msg) | msg - String, required | shows a green box with specified msg | success('Simple none-HTML message') |
warning(msg) | msg - String, required | shows an orange box with specified msg | warning('Simple none HTML message') |
alert(msg) | msg - String, required | shows a red box with specified msg | alert('Simple none HTML message') |
async(promise, onResolve, onReject, msg, successMsg) | promise - Promise, required; onResolve - Function, optional; onReject - Function, optional; msg - String, optional, msg for loading box successMsg - String, optional, if specified will shown as success box on promise resolve | shows a loading gray box with specified msg On promise resolve will run onResolve function and show success box if successMsg was specified On promise reject will run onReject function and show alert box, where msg is a value of promise reject() | alert(somePromise, runIfResolvedFunc, runIfRejectedFunc, 'Custom loading msg', 'Async event successfully finished message') |
confirm(msg, okFunc, cancelFunc) | msg - String, required okFunc - Function, optional cancelFunc - Function, optional | shows a modal dialog, which is waiting for users confirmation If user pressed 'OK' button, okFunc will be executed If user pressed 'Cancel' button, cancelFunc will be executed. Both buttons on press will close modal dialog | confirm('Are you sure?', runIfOkClicked, runIfCancelClicked) |
Options
You can pass your own options when you're initializing a library, e.g.
var options = {
labels: {
tip: "Your custom tip box label"
}
}
var notifier = new AWN.default(options)
Available options
All labels properties support HTML.
| Name | Type | Default | Description |
|---|---|---|---|
| position | String | "bottom-right" | position of notifications |
| duration | Number | 5000 | determines how long notification exists, ms |
| animationDuration | Number | 300 | determines speed of animation, ms |
| maxNotifications | Number | 10 | max amount of notifications |
| asyncDefaultMessage | String | "Please, wait..." | default loading box message, supports HTML |
| labels | Object | See properties bellow | default labels for notifications |
| labels.tip | String | "Tip" | default label for tip box |
| labels.info | String | "Info" | default label for info box |
| labels.success | String | "Success" | default label for success box |
| labels.warning | String | "Attention" | default label for warning box |
| labels.alert | String | "Error" | default label for alert box |
| labels.async | String | "Loading" | default label for async box |
| labels.confirm | String | "Confirmation required" | confrim window title |
| icons | Object | See properties bellow | default Font Awesome icons for notifications |
| icons.tip | String | "question-circle" | FontAwesome icon classes for tip box, first should be without fa- |
| icons.info | String | "info-circle" | FontAwesome icon classes for info box, first should be without fa- |
| icons.success | String | "check-circle" | FontAwesome icon classes for success box, first should be without fa- |
| icons.warning | String | "exclamation-circle" | FontAwesome icon classes for warning box, first should be without fa- |
| icons.alert | String | "warning" | FontAwesome icon classes for alert box, first should be without fa- |
| icons.async | String | "cof fa-spin" | FontAwesome icon classes for async box, first should be without fa- |
| icons.confirm | String | "warning" | FontAwesome icon classes for confirm window, first should be without fa- |
| icons.enabled | Boolean | True | Determines icons existence |
| icons.template | Object | See properties bellow | Determines icons template |
| icons.template.prefix | String | "<span><i class='fa fa-fw fa" | HTML before any icons[value] (e.g. icons.tip) |
| icons.template.suffix | String | "'></i></span>" | HTML after any icons[value] (e.g. icons.tip) |
| confirm | Object | See properties bellow | confirmation window settings |
| confirm.successBtnLabel | String | "OK" | confirm window success button label |
| confirm.cancelBtnLabel | String | "Cancel" | confirm window cancel button label |
| replacements | Object | See properties bellow | contains rules of replacement for msgeach rule is Objectwhere keys are first param for replace function and values are second param. |
| replacements.general | Object | { "<script>": "", "</script>": "" } | rules for all event types |
| replacements.tip | Object | null | rules for tip events |
| replacements.info | Object | null | rules for info events |
| replacements.success | Object | null | rules for success events |
| replacements.warning | Object | null | rules for warning events |
| replacements.alert | Object | null | rules for alert events |
| replacements.async | Object | null | rules for async events |
| replacements.confirm | Object | null | rules for confirm window |
Styles
Most comfortable and quick way to change styles is dowload styles folder, which containts .scss files. Then you have to edit variables.scss, compile your scss to css and add new css file to your project.
Also, you can just add default style.css to your project, and override it in your styles file. To learn more about default styles, look at styles folder.
Make sure that you pass safe HTML to msg param. Sending data which can be directly or indirectly editted by user (e.g. name of account), provides a possibility for HTML Injections. You can set up replacements in options to filter msg variable.
This project is licensed under the terms of the MIT license.
FAQs
Lightweight library for beautifull and smooth notifications
The npm package awesome-notifications receives a total of 1,566 weekly downloads. As such, awesome-notifications popularity was classified as popular.
We found that awesome-notifications demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.